<template>
	<div class="page dealEmergencyApplyHistory-page" data-page="emergencyDetail" style="z-index: 2;">
		<div class="link-page-nav">
			<a href="#" class="link" @click=$root.backToTab()>
				<i class="iconfont icon-zuo"></i>
			</a>
		</div>
		<div class="link-page-top" style="padding-bottom: 17px;">
			<div class="link-page-title">历史记录详情</div>
		</div>
		<div class="page-content">
			<div class="tabs emergency-tab emergencyTabContentls" id="emergencyTabContentls_{{getNewId}}">
				<div class="emergency-tab-content">
					<div class="list" style="margin-bottom:150px;">
						<div class="list accordion-list">
							<div class="yj-map">
								<div id="drawBmapn_{{getNewId}}" style="height:200px;"></div>
								<div class="yj-map-bot">
									<div class="yj-map-bot-t" style="position: relative;">
										<div class="yj-map-bot-t-r">
											<span>火情位置</span>
										</div>
										<span @click="fixFirePosition()" style="margin-right:10px">立即前往</span>
										<i class="iconfont icon-youjiantoushixinxiao"
											style="font-size:36px;color:#2471CA ; position: absolute;right: -20px; top: 0;"></i>
									</div>
									<div class="location" id="emergencyDetail_location_{{getNewId}}">-</div>
								</div>
							</div>
							<div class="yjya-basic">
								<div class="title">时间信息</div>
								<div class="basic">
									<div class="list">
										<div class="left">火情推送时间</div>
										<div class="right" id="hqts_{{getNewId}}">-</div>
									</div>
									<div class="list">
										<div class="left">火情结束时间</div>
										<div class="right" id="jssj_{{getNewId}}">-</div>
									</div>
									<div class="list">
										<div class="left">火情持续时间</div>
										<div class="right" id="cxsj_{{getNewId}}">-</div>
									</div>
								</div>
							</div>
							<div class="yjya-basic" style="display:none" id="deal_video_{{getNewId}}">
								<div class="title" id="num_{{getNewId}}">附近监控</div>
								<div class="block" id="emergencyVideobug_{{getNewId}}" style="display:none"></div>
							</div>
							<ul class="weizhiul">
								<li class="accordion-item">
									<div class="item-inner weizhi" style="margin: 0 20px;margin-bottom: 20px;">
										<div class="item-title">
											<b style="color: #E07762;font-size: 17px;">应急预案</b>
											</br>
											<b style="color: #333333;font-size: 17px;" id="yamc_{{getNewId}}">-</b>
										</div>
									</div>
								</li>
							</ul>
							<div class="block" id="emergencyPlan" style="padding: 0px;margin:0px">
								<div class="block-title" id="groupHead_{{getNewId}}"
									style="color:#222222;margin-top:10px;padding-left: 5px;font-weight:bold;">
									<i class="iconfont icon-youjiantoushixinxiao"
										style="font-size:36px;vertical-align: middle; margin-left:-10px"></i>
									<span style="display:inline-block;vertical-align:middle;margin-left: -10px;">应急人员</span>

								</div>
								<div class="row" id="yjry_{{getNewId}}"></div>
								<div class="emergencyPlanProse" style="background-color:#f6fafc00;margin: 0px;">
									<div class="block-title" style="color:#222222;margin-top:10px;padding-left: 5px;font-weight:bold;">
										<i class="iconfont icon-youjiantoushixinxiao"
											style="font-size:36px;vertical-align: middle; margin-left:-10px"></i>
										<span style="display:inline-block;vertical-align:middle;margin-left: -10px;">处置流程</span>
									</div>
									<div class="emergencyPlanProse-content" id="czlc_{{getNewId}}"></div>
									<div class="block-title block-titleClick"
										style="color:#222222;margin-top:10px;padding-left: 5px;font-weight:bold;">
										<div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;">
										</div>
										现场指挥小组分工
										<i class="iconfont icon-xiala" style="float: right;color: #999999"></i>
									</div>
									<div class="emergencyPlanGroup-content " id="yafg1_{{getNewId}}"></div>
									<div class="block-title block-titleClick"
										style="color:#222222;margin-top:10px;padding-left: 5px;font-weight:bold;">
										<div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;">
										</div>
										信息传导小组分工
										<i class="iconfont icon-xiala" style="float: right;color: #999999"></i>
									</div>
									<div class="emergencyPlanGroup-content" id="yafg2_{{getNewId}}"></div>

									<div class="block-title block-titleClick"
										style="color:#222222;margin-top:10px;padding-left: 5px;font-weight:bold;">
										<div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;">
										</div>
										灭火战斗小组分工
										<i class="iconfont icon-xiala" style="float: right;color: #999999"></i>
									</div>
									<div class="emergencyPlanGroup-content" id="yafg3_{{getNewId}}"></div>

									<div class="block-title block-titleClick"
										style="color:#222222;margin-top:10px;padding-left: 5px;font-weight:bold;">
										<div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;">
										</div>
										引导疏散小组分工
										<i class="iconfont icon-xiala" style="float: right;color: #999999"></i>
									</div>
									<div class="emergencyPlanGroup-content" id="yafg4_{{getNewId}}"></div>

									<div class="block-title block-titleClick"
										style="color:#222222;margin-top:10px;padding-left: 5px;font-weight:bold;">
										<div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;">
										</div>
										安全警戒小组分工
										<i class="iconfont icon-xiala" style="float: right;color: #999999"></i>
									</div>
									<div class="emergencyPlanGroup-content" id="yafg5_{{getNewId}}"></div>

									<div class="block-title block-titleClick"
										style="color:#222222;margin-top:10px;padding-left: 5px;font-weight:bold;">
										<div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;">
										</div>
										后勤救护小组分工
										<i class="iconfont icon-xiala" style="float: right;color: #999999"></i>
									</div>
									<div class="emergencyPlanGroup-content" id="yafg6_{{getNewId}}"></div>

									<div class="block-title block-titleClick"
										style="color:#222222;margin-top:10px;padding-left: 5px;font-weight:bold;">
										<div style="width:6px;height: 6px;border-radius:50%;background:#4699FF;display: inline-block;">
										</div>
										其他小组分工
										<i class="iconfont icon-xiala" style="float: right;color: #999999"></i>
									</div>
									<div class="emergencyPlanGroup-content" id="yafg7_{{getNewId}}"></div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</template>
<style>
	.weizhi:after {
		height: 0px;
	}

	.weizhiul {
		line-height: 1.7;
	}

	.weizhiul:after {
		height: 0px;
	}

	.emergencyPlanGroup-content {
		display: none;
	}

	.emergencyPlanGroup-content img {
		width: 100%;
	}

	.dealEmergencyApplyHistory-page .emergencyTabContentls .list {
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.dealEmergencyApplyHistory-page .emergencyTabContentls .list ul:after {
		height: 0px;
	}

	.dealEmergencyApplyHistory-page .emergencyTabContentls .block-title {
		margin-top: 10px;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 0px;
	}

	.dealEmergencyApplyHistory-page .emergencyTabContentls .block p {
		margin: 0px;
		padding-bottom: 5px;
		font-size: 14px;
	}

	.dealEmergencyApplyHistory-page .emergencyTabContentls .block {
		margin-bottom: 20px;
	}
</style>
<script>
	let tempData;
	let tempMap;
	return {
		data: function () {
			return {
				dataList: [],
				planId: this.$route.params.currentEmId,
				id: this.$route.params.id,
				planMap: null,
				firePoint: null,
				getNewId: (new Date()).getTime(),
			}
		},
		mounted() {
			jQuery('.emergencyPlanGroup-content').eq(0).show()
			jQuery('.block-titleClick').click(function () {
				if (jQuery('i', this).hasClass('icon-xiala')) {
					jQuery('i', this).addClass('icon-shouqi').removeClass('icon-xiala')
					jQuery(this).next('.emergencyPlanGroup-content').stop().slideDown()
				} else {
					jQuery('i', this).removeClass('icon-shouqi').addClass('icon-xiala')
					jQuery(this).next('.emergencyPlanGroup-content').stop().slideUp()
				}
			})
		},
		methods: {
			//获取小组相关负责人
			selectEmergencyPlanRecordsDetail: function () {
				let self = this;
				let $ = self.$;
				Dao.selectEmergencyPlanRecordsDetail({
					userName: userInfor.accountName,
					deviceId: appKeyObj.deviceId,
					recordId: self.id,
				}, function (peoData) {
					self.selectEmergencyPlanDetail(peoData.emergencyPlan.id);
					self.drowBmap(peoData.lon, peoData.lat);
					$("#emergencyDetail_location_" + self.getNewId).html(common.transNullundefinedToline(peoData.location));
					$("#hqts_" + self.getNewId).html(common.transNullundefinedToline(peoData.createTime));
					$("#jssj_" + self.getNewId).html(common.transNullundefinedToline(peoData.updateTime));
					$("#cxsj_" + self.getNewId).html(common.transNullundefinedToline(peoData.continueTime));
					//小组相关负责人
					let peoDatalist = peoData.members;
					if (peoDatalist && peoDatalist.length > 0) {
						$("#yjryparent").show();
						for (let n = 0; n < peoDatalist.length; n++) {
							$("#yjry_" + self.getNewId).append(`
                                <div class="row" style="padding-left: 10px;margin-top:10px">
                                    <div class="gropList col-40">` + common.transNullundefined(peoDatalist[n]
									.groupName) + `</div>
                                    <div class="gropList col-25">` + common.transNullundefined(peoDatalist[n]
								.dutyName) + `</div>
									<div class="gropList col-35">` + (peoDatalist[n].tel ?
									`<span class= "tel" ontouchstart = "return false;" onclick = "window.location='tel:` +
									peoDatalist[n].tel + `'" > ` + peoDatalist[n].tel + `</span>` : '') + `</div>
                                </div>
                            `);
						}
					}
					if (peoData.videoInfo && peoData.videoInfo.length > 0) {
						let videoData = [];
						$("#deal_video_" + self.getNewId).show();
						$("#emergencyVideobug_" + self.getNewId).show();
						let DFVideoIcon = "";
						let status = "";
						$("#num_" + self.getNewId).html("有" + peoData.videoInfo.length + "路视频");
						for (let i = 0; i < peoData.videoInfo.length; i++) {
							let vedioObj = peoData.videoInfo[i].video;
							videoData[peoData.videoInfo[i].id] = peoData.videoInfo[i];
							if (!peoData.videoInfo[i].picUrl && peoData.videoInfo[i].picUrl == "") {
								DFVideoIcon = staticPath + "img/vedio/defaultVideo.png";
							} else {
								DFVideoIcon = peoData.videoInfo[i].picUrl;
							}
							if (peoData.videoInfo[i].isOnline == 1) {
								status = staticPath + "img/vedio/play.png"
							}
							if (peoData.videoInfo[i].isOnline == 0) {
								status = staticPath + "img/vedio/offline.png"
							}
							$("#emergencyVideobug_" + self.getNewId).append(`
                                <div class="videoli" id=videoli` + common.transNullundefined(peoData.videoInfo[i].id) + `>
                                      <img class="vedioImg" id=img_` + common.transNullundefined(peoData.videoInfo[i]
									.id) + ` src=` + DFVideoIcon +
								` onerror="this.onerror=null; this.src='` + picVedioNo() + `'">
                                      <div class="status_div" id= status_` + self.getNewId + `_` + common
								.transNullundefined(peoData
									.videoInfo[i].id) + `>
                                          <img class="div_status" src=` + status + ` >
                                      </div>
                                </div>`);
							//视频播放
							jQuery('#status_' + self.getNewId + `_` + common.transNullundefined(peoData.videoInfo[i].id)).off(
								"click").on("click", {
								'data': peoData.videoInfo[i].id
							}, function (e) {
								let id = e.data.data;
								let bean = videoData[id];
								let videoBean = {};
								videoBean.id = bean.id;
								videoBean.deviceId = bean.deviceId;
								videoBean.type = bean.type;
								videoBean.name = bean.name;
								videoBean.channel = bean.channel;
								videoBean.status = bean.status;
								videoBean.picUrl = bean.picUrl;
								videoBean.isOnline = bean.isOnline;
								videoBean.isConcem = bean.isConcem == null ? 0 : bean.isConcem;
								common.loading(1);
								Dao.getAuthList({
									userName: userInfor.accountName,
									deviceId: appKeyObj.deviceId,
									organizationId: bean.organizationId,
									equiptType: bean.type,
									orgCode: userInfor.org.orgCode,
									authId: bean.authId
								}, function (data) {
									common.loading(0);
									let videoKeyBean = data[0];
									native.openVideo(JSON.stringify(videoKeyBean), JSON.stringify(videoBean));
								}, function (e) {
									common.loading(0);
									app.methods.showToastBottom('播放视频失败');
								});
							});
						}
					}
				});
			},
			//获取预案流程和小组分工
			selectEmergencyPlanDetail: function (planId) {
				let self = this;
				let $ = self.$;
				Dao.selectEmergencyPlanDetail({
					userName: userInfor.accountName,
					deviceId: appKeyObj.deviceId,
					planId: planId,
				}, function (data) {
					let flag = false
					$("#yamc_" + self.getNewId).html(common.transNullundefined(data.name));
					$("#czlc_" + self.getNewId).html(common.transNullundefined(data.flowContent));
					$("#yafg7_" + self.getNewId).html(common.transNullundefined(data.taskContent));
					$("#yafg1_" + self.getNewId).html(common.transNullundefined(data.leaderTaskContent));
					$("#yafg2_" + self.getNewId).html(common.transNullundefined(data.conductionTaskContent));
					$("#yafg3_" + self.getNewId).html(common.transNullundefined(data.battleTaskContent));
					$("#yafg4_" + self.getNewId).html(common.transNullundefined(data.evacuateTaskContent));
					$("#yafg5_" + self.getNewId).html(common.transNullundefined(data.safetyalertTaskContent));
					$("#yafg6_" + self.getNewId).html(common.transNullundefined(data.logisticsTaskContent));
					if (data.leaderTaskContent == '') {
						$("#yafg1_" + self.getNewId).hide()
						$("#yafg1_" + self.getNewId).prev('.block-title').hide()
					} else {
						if (!flag) {
							$("#yafg1_" + self.getNewId).show()
							$("#yafg1_" + self.getNewId).prev('.block-title').find('i').addClass('icon-shouqi').removeClass(
								'icon-xiala')
							flag = true
						}
					}
					if (data.conductionTaskContent == '') {
						$("#yafg2_" + self.getNewId).hide()
						$("#yafg2_" + self.getNewId).prev('.block-title').hide()
					} else {
						if (!flag) {
							$("#yafg2_" + self.getNewId).show()
							$("#yafg2_" + self.getNewId).prev('.block-title').find('i').addClass('icon-shouqi').removeClass(
								'icon-xiala')
							flag = true
						}
					}
					if (data.battleTaskContent == '') {
						$("#yafg3_" + self.getNewId).hide()
						$("#yafg3_" + self.getNewId).prev('.block-title').hide()
					} else {
						if (!flag) {
							$("#yafg3_" + self.getNewId).show()
							$("#yafg3_" + self.getNewId).prev('.block-title').find('i').addClass('icon-shouqi').removeClass(
								'icon-xiala')
							flag = true
						}
					}
					if (data.evacuateTaskContent == '') {
						$("#yafg4_" + self.getNewId).hide()
						$("#yafg4_" + self.getNewId).prev('.block-title').hide()
					} else {
						if (!flag) {
							$("#yafg4_" + self.getNewId).show()
							$("#yafg4_" + self.getNewId).prev('.block-title').find('i').addClass('icon-shouqi').removeClass(
								'icon-xiala')
							flag = true
						}
					}
					if (data.safetyalertTaskContent == '') {
						$("#yafg5_" + self.getNewId).hide()
						$("#yafg5_" + self.getNewId).prev('.block-title').hide()
					} else {
						if (!flag) {
							$("#yafg5_" + self.getNewId).show()
							$("#yafg5_" + self.getNewId).prev('.block-title').find('i').addClass('icon-shouqi').removeClass(
								'icon-xiala')
							flag = true
						}
					}
					if (data.logisticsTaskContent == '') {
						$("#yafg6_" + self.getNewId).hide()
						$("#yafg6_" + self.getNewId).prev('.block-title').hide()
					} else {
						if (!flag) {
							$("#yafg6_" + self.getNewId).show()
							$("#yafg6_" + self.getNewId).prev('.block-title').find('i').addClass('icon-shouqi').removeClass(
								'icon-xiala')
							flag = true
						}
					}
					if (data.taskContent == '') {
						$("#yafg7_" + self.getNewId).hide()
						$("#yafg7_" + self.getNewId).prev('.block-title').hide()
					} else {
						if (!flag) {
							$("#yafg7_" + self.getNewId).show()
							$("#yafg7_" + self.getNewId).prev('.block-title').find('i').addClass('icon-shouqi').removeClass(
								'icon-xiala')
							flag = true
						}
					}
				}, function (e) {
					common.loading(0);
					app.methods.showToastBottom('获取预案流程失败');
				});
			},
			drowBmap: function (lon, lat) {
				let point = null;
				let parselon = JSON.parse(lon);
				let parselat = JSON.parse(lat);
				let self = this;
				//百度地图显示
				this.planMap = new BMap.Map('drawBmapn_' + self.getNewId, {
					enableMapClick: false //关闭底图可点功能
				});
				if (parselon != null && parselon != "" && parselon != undefined) {
					point = new BMap.Point(parselon, parselat);
				} else {
					point = new BMap.Point(117.830727, 30.484801);
				}
				let icon = new BMap.Icon('/ilink-app-h5-zd/static/img/rdspFile_1557407293967.png', new BMap.Size(35,
					55), {
					anchor: new BMap.Size(35, 55)
				});
				let marker = new BMap.Marker(point, {
					icon: icon
				});
				this.firePoint = point;
				this.planMap.centerAndZoom(point, 15); // 跳动的动画
				this.planMap.addOverlay(marker);
				this.planMap.enableScrollWheelZoom(); //允许缩放
			},
			fixFirePosition: function () {
				native.openNavigation(this.firePoint.lng, this.firePoint.lat);
				/* if (this.firePoint) {
					this.planMap.centerAndZoom(this.firePoint, 15); // 跳动的动画
				} */
			}
		},
		on: {
			pageInit: function (e, page) {
				let self = this;
				self.selectEmergencyPlanRecordsDetail();

			},
			pageBeforeRemove: function (e, page) {
				if (tempMap) {
					tempMap.dispose();
				}
			}
		}
	}
</script>